// 周边配套
<template>
  <div id="SupportDetailsList">
    <Header :currentCity="currentCity" :cityList="cityList"></Header>
    <Crumb :crumbListData="crumbListData"></Crumb>
    <div class="SupportDetailsList_wrap">
      <div class="SupportDetailsList_wrap_tabs">
        <div class="navAcitive">
          <ul>
            <li
              v-for="(item, index) in tabList"
              :key="index"
              :class="{ activeNameTipe: activeCode == index }"
            >
              <a :href="prefixUrl + item.href">{{ item.name }}</a>
            </li>
          </ul>
        </div>
        <div class="HUxingDels">
          <!-- <div class="HUxingDels_topTag">
            <div class="house-tags">
                <div class="retract-open " id="julive-retract-open-on" style="display: block;" >
                    <span class="text txt-on">展开<i class="icon el-icon-arrow-down"></i> </span>
                    <span class="text txt-off">收起<i class="icon el-icon-arrow-up"></i> </span>
                </div>
                <ul class="tags">
                  <li v-if="(item3,index3) in HouseList" :key="index3">
                    <a href="https://cd.julive.com/project/20018186/ht-20119945-7.html">30m²-E3户型</a>
                    <a
                      :hrwf="`/lpxq/${item.estateId}.html`"
                      target="_blank"
                      class="rank_box"
                    >
                    {{item3.area}}
                    </a>
                  </li>
                </ul>
            </div>
          </div>-->
          <div class="huxing_row">
            <div class="huxingDel_row">
              <div class="huxingDel_row_left floatLeft">
                <div v-swiper:mySwiper="swiperOption" class="swiper-container">
                  <div class="swiper-wrapper">
                    <div class="swiper-slide" v-for="(item, indx) in houseDelRoomImg" :key="indx">
                      <img :src="item.url" class="img1 pic" :title="HouseDelsList.name + `楼盘户型图`" />
                    </div>
                  </div>
                  <div class="swiper-button-prev"></div>
                  <div class="swiper-button-next"></div>
                </div>
              </div>
              <div class="huxingDel_row_right floatLeft">
                <h4 class="huxingDel_row_right_h1">
                  {{ HouseDelsList.roomName }}
                  <span
                    v-if="HouseDelsList.roomTypeName"
                  >--{{ HouseDelsList.roomTypeName }}</span>
                  <span
                    style="background: #ff9800; color: #fff; padding: 5px 10px"
                    v-html="
                      HouseDelsList.saleStatus == 0
                        ? '待售'
                        : HouseDelsList.saleStatus == 1
                        ? '在售'
                        : HouseDelsList.saleStatus == 2
                        ? '售罄'
                        : '暂无'
                    "
                  ></span>
                </h4>
                <p class="huxingDel_row_right_p1">
                  <span
                    v-for="(item1, index1) in houseDelRoomTags"
                    :key="index1"
                    style="margin-right: 10px"
                  >{{ item1.tagName }}</span>
                </p>
                <p class="huxingDel_row_right_p2">
                  <span class="p2_span1">约{{ HouseDelsList.totalPrice }}</span>万/套起(参考总价)
                  <span
                    class="p2_span2 cursor"
                    @click="
                      clickType = 1;
                      subscribe(
                        '订阅变价通知',
                        '涨价降价及时了解，买房时机不错过！',
                        'https://mfgj.oss-cn-beijing.aliyuncs.com/upload/20211115/7f6392c44cd6446aa6de3c274f15e75a.png',
                        '订阅成功'
                      );
                    "
                  >变价提醒</span>
                </p>
                <h4 class="huxingDel_row_right_h2" v-if="HouseDelsList.houseType == 2">
                  <span
                    class="cursor"
                    @click="
                      clickType = 8;
                      subscribe(
                        '咨询返现详情',
                        '专业楼盘管家，深度解答！',
                        'https://mfgj.oss-cn-beijing.aliyuncs.com/upload/20211111/ec7c2095870d43459e3713b406281806.png',
                        '订阅成功'
                      );
                    "
                  >预计返现？万元</span>
                  <b class="cursor">
                    <el-tooltip class="item cursor" effect="dark" placement="bottom">
                      <div slot="content">
                        该"返现"金额为参
                        <br />考金额,可能存在误
                        <br />差,实际金额请询问
                        <br />本站工作人员
                      </div>
                      <img src="/images/wen.png" title="/images/wen.png" alt />
                    </el-tooltip>
                  </b>
                </h4>
                <div class="huxingDel_row_right_div1">
                  <p>
                    朝向&nbsp;&nbsp;&nbsp;
                    <span
                      v-html="
                        HouseDelsList.orientation
                          ? HouseDelsList.orientation
                          : '暂无'
                      "
                    ></span>
                  </p>
                  <p>
                    建面&nbsp;&nbsp;&nbsp;
                    <span
                      v-html="
                        HouseDelsList.area ? HouseDelsList.area + `㎡` : '暂无'
                      "
                    ></span>
                  </p>
                </div>
                <div class="huxingDel_row_right_div2">
                  <p>
                    户型分布&nbsp;&nbsp;&nbsp;
                    <span
                      v-html="
                        HouseDelsList.belongBuilding
                          ? HouseDelsList.belongBuilding
                          : '暂无'
                      "
                    ></span>
                  </p>
                </div>
                <div
                  class="huxingDel_row_right_guanzhu cursor"
                  @click="
                    clickType = 3;
                    subscribe(
                      '咨询剩余房源',
                      '专业楼盘管家，深度解答！',
                      'https://mfgj.oss-cn-beijing.aliyuncs.com/upload/20211111/ec7c2095870d43459e3713b406281806.png'
                    );
                  "
                >
                  <i class="el-icon-office-building"></i>
                  获取实时房源信息
                </div>

                <div class="huxingDel_row_right_miaoshu">
                  <h5>优势描述</h5>
                  <p
                    v-html="
                      HouseDelsList.roomDesc ? HouseDelsList.roomDesc : '暂无'
                    "
                  ></p>
                </div>
              </div>
            </div>
            <div class="huxingDel_tishi">
              <p>
                免责声明：本网呈现的户型图为第三方提供的非标准的参考户型图或根据第三方提供的户型图通过系统/技术等手段生成的非标准的参考的户型图，不应作为您交易的决策依据。户型图上呈现的户型、面积、朝
                向、内部结构、功能分区仅供展示参考，实际信息请以与开发商签订的商品房买卖合同为准。详细请阅读
                <span
                  class="cursor"
                  @click="centerDialogVisible = true"
                >《重要风险提示》</span>
              </p>
            </div>
            <!-- 关键区域，街道，周边 -->
            <keywordBox :currentCity="currentCity" :prefixUrl="prefixUrl" :regionList="regionList"></keywordBox>
            <el-dialog
              title="重要风险提示"
              :visible.sync="centerDialogVisible"
              width="500px"
              class="centerDialog_type"
              center
            >
              <div class="centerDialog_list">
                <p>✖✖✖✖✖✖✖✖✖✖旨在为广大用户提供更丰富的信息，但由于部分信息由第三方提供，部分信息通过技术手段生成，我们持续通过技术和管理手段提升信息的准确度，但我们无法确保信息的真实性、准确性和完整性。房产交易滋事体大，✖✖✖✖✖✖✖✖✖✖上的信息不应作为您交易决策的依据，您决策前应与房地产开发商核实相关信息、并亲自到房屋中核验信息，或以产权证明、政府类网站发布的官方信息为准。✖✖✖✖✖✖✖✖✖✖不对您交易过程中对本网站信息产生的依赖承担任何明示或默示的担保责任或其他任何责任。</p>
                <h3>请您详细阅读如下声明：</h3>
                <h4>1. 关于参考户型图</h4>
                <p>✖✖✖✖✖✖✖✖✖✖呈现的户型图为第三方提供的非标准的参考户型图或根据第三方提供的户型图通过系统/技术等手段生成的非标准的参考户型图，其中户型结构及房屋面积并非按国家标准进行的测绘专业活动取得。因为各种原因，参考户型图与真实现状一定存在差异，我们无法保障户型图准确性和差异率，户型图仅供参考，不应作为您交易的决策依据，房屋面积的准确信息请您与开发商/产权方核实，并请以产权证明或您委托的专业机构测量结果为准。</p>
                <h4>2. 关于房屋装修情况</h4>
                <p>✖✖✖✖✖✖✖✖✖✖房源图片、效果图、视频等呈现出的房屋装修情况可能因为拍摄时间、拍摄角度等原因和实际场景存在出入，仅供参考，不应作为您交易的决策依据，请以您在看房时房源的实际情况为准。样板间与实际交付标准可能不一致，请您审慎评估决断。</p>
                <h4>3. 关于房屋情况</h4>
                <p>✖✖✖✖✖✖✖✖✖✖展示的房源信息（包括但不限于房屋面积、所在楼栋、房屋用途、开盘时间等）由开发商或其他第三方提供，仅供参考不应作为您交易的决策依据，房源的准确信息请您与开发商核实，并以房本信息、房屋实际情况、您签订房屋交易合同中披露的信息为准。</p>
                <h4>4. 关于房屋周边配套等</h4>
                <p>房源介绍中的周边配套、在建设施、规划设施、地铁信息、绿化率、得房率等内容均系开发商等第三方提供，仅供参考，不应作为您交易的决策依据，房屋周边配套请您与开发商及主管部门核实，并以房本信息、房屋实际情况、您签订房屋交易合同中披露的信息为准。</p>
                <h4>5. 关于距离</h4>
                <p>房源介绍中与距离相关的数据均来源于百度地图。</p>
              </div>
            </el-dialog>
          </div>
        </div>
      </div>
    </div>
    <Footer :currentCity="currentCity"></Footer>

    <!-- 弹窗按钮订阅 -->
    <PopupForm
      :show="popupform.show"
      :title="popupform.title"
      :desc="popupform.desc"
      :cover="popupform.cover"
      :phone="popupform.phone"
      :smsState="popupform.smsState"
      :customTheme="popupform.customTheme"
      :background="popupform.background"
      :contentClass="popupform.contentClass"
      @phoneChange="phoneChange"
      @confirm="returnVisit"
      @cancel="
        popupform.show = false;
        popupform.background = '';
      "
    ></PopupForm>
    <!-- 订阅回调弹窗 -->
    <PopupSuccess
      :show="popupsubscribe.show"
      :cover="popupsubscribe.cover"
      :title="popupsubscribe.title"
      :desc="popupsubscribe.desc"
      @cancel="
        popupsubscribe.show = false;
        subscribeDisabled = false;
      "
    ></PopupSuccess>
  </div>
</template>

<script>
var head = {
  title: '成都✖✖✖✖✖✖✖✖✖✖', // 网页包头
  content: '成都✖✖✖✖✖✖✖✖✖✖', // 网页描述
  keywords: '成都,买房,管家,楼盘,买房网,✖✖✖✖✖✖✖✖✖✖', // 网页关键词
}
import axios from 'axios'
import u from '~/plugins/Ccom'
export default {
  head() {
    return {
      title: head.title,
      meta: [
        { name: 'description', content: head.content },
        { name: 'keywords', content: head.keywords },
      ],
      link: [
        {
          rel: 'stylesheet',
          href: `/css/huxing.css?v=${new Date().getTime()}`,
        },
      ],
    }
  },
  data() {
    return {
      activeCode: 3,
      swiperOption: {
        pagination: '.swiper-pagination',
        paginationClickable: true,
        //  autoplay: 2000,//自动轮播2秒
        speed: 1000,
        grabCursor: true, //手势
        loop: false,
        observer: true,
        observeParents: true,
        autoplayDisableOnInteraction: false,
        nextButton: '.swiper-button-next',
        prevButton: '.swiper-button-prev',
      },
      centerDialogVisible: false,

      userInfo: '',
      phone: '',
      //组件订阅弹窗
      popupsubscribe: {
        show: false, //订阅数据
      },
      customTheme: 0,
      contentClass: '',
      popupform: {
        show: false, //订阅成功数据
        phone: '',
      },
      clickType: '', // 1变价提醒2开盘提醒3咨询剩余房源4订阅楼盘动态5收藏楼盘6户型分析7电话咨询（询购房资格）8询返现9专车看房10咨询返现详情11咨询房贷首付
      subscribeDisabled: false,
    }
  },
  validate(ctx) {
    return /(.*?)\.html/.test(ctx.params.id)
  },
  async asyncData(ctx) {
    var prefixUrl = ctx.prefixUrl
    var currentCity = ctx.currentCity
    var cityList = ctx.cityList
    var crumbListData = []
    var estateId = ctx.params.id ? ctx.params.id.split('.')[0] : ''
    var huxingCode = ctx.query.roomId || ''
    var tabList = [
      {
        name: '楼盘首页',
        href: `/lpxq/${estateId}.html`,
      },
      {
        name: '基础信息',
        href: `/lpxqxx/${estateId}.html`,
      },
      {
        name: '楼盘相册',
        href: `/lpxqxc/${estateId}.html`,
      },
      {
        name: '楼盘户型',
        href: `/lpxqhx/${estateId}.html`,
      },
      {
        name: '楼盘动态',
        href: `/lpxqdt/${estateId}.html`,
      },
      {
        name: '周边配套',
        href: `/lpxqpt/${estateId}.html`,
      },
      {
        name: '房价走势',
        href: `/lpxqzs/${estateId}.html`,
      },
      {
        name: '你问我答',
        href: `/lpxqwd/${estateId}.html`,
      },
      {
        name: '免费专车',
        href: `/mfzc/${estateId}.html`,
      },
    ]
    var HouseDelsList = [] //户型详情
    var HouseList = [] //户型列表
    var houseDelRoomImg = [] //户型图片
    var houseDelRoomTags = [] //户型标签

    var HouseDetail = [] //楼盘详情

    // 获取楼盘详情
    var getMetro = await u.http({
      url: '/pc/houseDetail/queryHouseInfoDetailById',
      params: {
        estateId: estateId, //楼盘ID
        userId: '', //用户ID
      },
    })
    if (getMetro.code == 200) {
      HouseDetail = getMetro.data.houseInfoDetail
      head.title = `${HouseDetail.name},楼盘户型,楼盘户型图详情,${currentCity.cityName}✖✖✖✖✖✖✖✖✖✖`
      head.content = `✖✖✖✖✖✖✖✖✖✖为您提供${currentCity.cityName}${HouseDetail.name}户型图,${HouseDetail.name}原始户型图大全,要看详细,清晰的${HouseDetail.name}房型图就上✖✖✖✖✖✖✖✖✖✖`
      head.keywords = `${HouseDetail.name}楼盘户型图详情`
      // ==========楼盘面包屑============
      var regionCode = {
        title: `${HouseDetail.regionName}楼盘`,
        href: prefixUrl + `/lpcx/${HouseDetail.regionAliases}`,
      }
      // 202112071655 sry 合并路径
      var regionA = [HouseDetail.regionAliases]
      var streetA = [HouseDetail.streetAliases]
      var nowCrumbHref = u.emptyArrayIsNull(regionA.concat(streetA))
      if (HouseDetail.streetName && HouseDetail.streetAliases) {
        var streetCode = {
          title: `${HouseDetail.streetName}楼盘`,
          href: prefixUrl + `/lpcx/${nowCrumbHref.join('-')}`,
        }
      } else {
        var streetCode = null
      }

      var houseCode = {
        title: `${HouseDetail.name}户型`,
        href: prefixUrl + ctx.route.fullPath,
      }
      // 修改栏目信息
      crumbListData = [
        {
          title: `${currentCity.cityName}✖✖✖✖✖✖✖✖✖✖`,
          href: prefixUrl,
        },
      ]

      if (streetCode) {
        crumbListData.push(regionCode, streetCode, houseCode)
      } else {
        crumbListData.push(regionCode, houseCode)
      }
      // ==========楼盘面包屑============
    } else {
      // 202111091818 sry
      return ctx.redirect('/error.html')
    }

    // 楼盘户型
    var RoomListDels = await u.http({
      url: '/app/houseRoom/queryHouseRoomDetailByRoomId',
      params: {
        roomId: huxingCode, //户型ID
      },
    })
    if (RoomListDels.code == 200) {
      HouseDelsList = RoomListDels.data.roomDetail
      houseDelRoomImg = RoomListDels.data.roomImgs
      houseDelRoomTags = RoomListDels.data.tags
    } else {
      // 202111091818 sry
      return ctx.redirect('/error.html')
    }

    return {
      prefixUrl,
      crumbListData,
      currentCity,
      cityList,
      tabList,
      estateId,
      HouseDelsList, //户型详情
      HouseList, //户型列表
      houseDelRoomImg, //户型图片
      houseDelRoomTags, //户型标签
      regionList: ctx.regionList
    }
  },

  mounted() {},
  methods: {
    // ==========================订阅回访消息==================================
    // 预约
    subscribe(
      title,
      desc,
      cover,
      titleend,
      customTheme,
      background,
      contentClass,
      url
    ) {
      this.popupform.show = true
      this.popupform.title = title
      this.popupform.cover = cover
      this.popupform.smsState = this.smsState
      this.popupform.desc = desc
      if (localStorage.getItem('mobile')) {
        this.popupform.phone = Number(localStorage.getItem('mobile'))
      }
      this.popupsubscribe.title = titleend
      this.popupform.customTheme = customTheme ? Number(customTheme) : 0 //是否为背景验证
      this.popupform.background = background //背景验证背景图
      this.popupform.contentClass = contentClass //活动背景图class样式
      this.popupform.url = url
    },
    // 登录成功回调
    returnVisit() {
      this.popupform.show = false
      this.subscribeDisabled = true
      let url = getCookie('token')
        ? '/app/visitRecord/addVisitRecord'
        : '/app/visitRecord/addVisitRecordByNoToken'
      u.http({
        client: true,
        url,
        headers: {
          token: getCookie('token') || '',
        },
        params: {
          clickType: this.clickType,
          phone: this.popupform.phone,
          estateId: this.estateId,
        },
      }).then((res) => {
        if (this.popupform.url) {
          location.href = this.popupform.url
          return false
        }
        this.popupsubscribe.show = true
      })
    },
    // 监听手机号
    phoneChange(e) {
      this.popupform.phone = e
    },
  },
}
</script>

<style>